<template>
  <div class="WarZoneFrockDetail">
    <div class="head">
      <div class="text">
        姓名:
        <span>{{pageInfo.warnUsername}}</span>
      </div>
      <el-divider direction="vertical"></el-divider>
      <div class="text">
        所属门店:
        <span>{{pageInfo.orgName}}</span>
      </div>
    </div>

    <div class="imgBox">
      <div class="img">
        <p class="title">定装照</p>

        <div class="box">
          <img :src="pageInfo.makeupFileUrl" />
        </div>
      </div>
      <div class="img">
        <p class="title">工装抓拍照</p>
        <div class="box">
          <img :src="pageInfo.beforeFileUrl" />
        </div>
      </div>
    </div>

    <div class="toolbar">
      <span>
        属实
        <el-radio-group v-model="pageInfo.isTrue">
          <el-radio :label="1">是</el-radio>
          <el-radio :label="0">否</el-radio>
        </el-radio-group>
      </span>
      <span>
        发送短信告知
        <el-radio-group v-model="pageInfo.isSend">
          <el-radio :label="1">是</el-radio>
          <el-radio :label="0">否</el-radio>
        </el-radio-group>
      </span>
    </div>

    <div class="btnGroup">
      <el-button size="small" type="warning" @click="$router.go(-1)">关闭</el-button>
      <el-button
        size="small"
        type="primary"
        @click="commit"
        v-if="pageInfo.warnState!=='2'"
        v-loading.fullscreen.lock="fullscreenLoading"
      >提交</el-button>
    </div>
  </div>
</template>

<script>
import { getWarningDataDetail, verifyWarnInfo } from "@/api/smartShops.js";
import $router from "../../../router";
export default {
  name: "WarZoneFrockDetail",
  watch: {
    "pageInfo.isTrue": {
      handler(newVal) {
        if (newVal == 0) {
          this.pageInfo.isSend = 0;
        }
      }
    }
  },
  data() {
    return {
      fullscreenLoading: false,
      sendATextMessage: 1,
      verified: 1,
      pageInfo: {
        isTrue: 1,
        isSend: 1
      },
      warnUserUuid: ""
    };
  },
  methods: {
    async getData(query) {
      let  { result } = await getWarningDataDetail(query);
      if (result) {
        this.pageInfo = { ...this.pageInfo, ...result };
        if (this.pageInfo.warnState == "0") {
          this.pageInfo.isSend = 1;
          this.pageInfo.isTrue = 1;
        } else {
          this.pageInfo.isTrue = Number(this.pageInfo.isFact);
          this.pageInfo.isSend = Number(this.pageInfo.isSend);
        }
        this.warnUserUuid = result.warnUserUuid;
      } else {
        this.$message({
          message: "数据为空！",
          type: "danger",
          duration: 1000
        });
      }
    },
    commit() {
      this.fullscreenLoading = true;
      this.$confirm("是否确认提交?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(async () => {
          let data = await verifyWarnInfo({
            warnUserUuid: this.warnUserUuid,
            isSend: Number(this.pageInfo.isSend),
            isTrue: Number(this.pageInfo.isTrue),
            performUuid: this.pageInfo.performUuid,
            warnUuid: this.pageInfo.warnUuid,
            warnTime: this.pageInfo.warnTime
          });
          this.$message({
            type: "success",
            message: "提交成功!",
            duration: 1500,
            onClose: () => {
              $router.go(-1);
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消提交"
          });
        });
      this.fullscreenLoading = false;
    }
  },
  created() {
    this.getData(this.$route.query);
  }
};
</script>

<style scoped lang="scss">
.WarZoneFrockDetail {
  width: 100%;
  height: 100%;

  .head {
    height: 50px;
    width: 100%;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #dcdfe6;

    .el-divider {
      height: 60%;
    }

    .text {
      font-size: 15px;
      margin: 0 10px;

      span {
        color: red;
        letter-spacing: 1px;
        font-weight: 500;
        padding-left: 4px;
      }
    }
  }

  .imgBox {
    height: 80%;
    width: 100%;
    display: flex;
    justify-content: space-between;

    .img {
      width: 50%;
      height: calc(100% - 30px);
      display: flex;
      justify-content: center;
      flex-direction: column;
      align-items: center;

      .title {
        height: 40px;
        width: 100%;
        text-align: center;
        line-height: 40px;
        font-size: 14px;
      }

      .box {
        width: 50%;
        min-width: 300px;
        height: calc(100% - 40px);

        img {
          width: 100%;
          height: 100%;
        }
        p {
          width: 100%;
          text-align: center;
          font-size: 14px;
        }
      }
    }
  }

  .toolbar {
    height: 30px;
    width: 100%;
    display: flex;

    span {
      width: 50%;
      height: 100%;
      display: flex;
      align-items: flex-end;
      justify-content: center;
      font-size: 14px;
      .el-radio {
        &:nth-child(1) {
          margin-left: 10px;
        }
      }
    }
  }

  .btnGroup {
    width: 150px;
    height: 40px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin: 0 calc((100% - 150px) / 2);
  }
}
</style>
